<template>
    <div class="registerBox clear-fix" >
        <div class="box"></div>
        <div class="logo">
            <img :src="dataInfos.dataInfo.logo" alt="" >
        </div>  
        <div class="login mixInput">
            <div class="loginPhone" >
                <i class="icon-shouji1 iconfont"></i>
                <input 
                    ref="telNumber" 
                    placeholder="请输入您的手机号"
                    v-model="telNumber" 
                    @blur="checkTel"
                    :class="{activeTel:flag}" />
            </div>
             <div class="loginPhone codeBox" >
                <i class="icon-yaochi iconfont"></i>
                <input  placeholder="验证码" v-model.lazy="codeText"
                 @blur="checkCode"/>
                <span
                     class="code" 
                    :class="{active:flag}"
                    @click="getCodeHandler"
                    ref="codeSpan"
                    >
                    获取验证码
                </span>
            </div>
             <div class="loginPhone" >
                <i class="icon-unie65b iconfont"></i>
                <input  placeholder="密码"/>
            </div>
        </div> 
        <div class="submitBox">
            <router-link to="/mine" >
            <button @click="submitHandler">提交</button>
            </router-link>
        </div>
    </div>
    
</template>
<script>
export default {
    name:"RegisterListView",
    data(){
        return{
            telNumber:"",
            flag:false,
            codeText:"",
            
            
        }
    },
    props:{
        dataInfos:{
            type:Object,
            dafault:function(){
                return{}
            }
        }
    },
    mounted(){
      
        
    },
    mutations:{
        updateToken(state,token){
            state.token = token
        }
    },
    methods:{
        submitHandler(){
            this.$store.commit("updateToken",this.telNumber)
        },
        //定义函数获取验证码
        getCheckCode(num) {
            var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
            var result = '';
            for (var i = 0; i < num; i++) {
                result += str[Math.floor(Math.random() * (str.length - 1 - 0 + 1) + 0)];
            }
            return result;
        },
        //通过点击事件获取验证码
        getCodeHandler(){
            this.$refs.codeSpan.innerHTML=this.getCheckCode(4)
        },
        //失焦手机号验证
        checkTel(){
            console.log(this.telNumber)
            if(!(/^1[3|4|5|8][0-9]\d{8}$/.test( this.telNumber))){ 
                this.$refs.telNumber.value = this.telNumber+"!手机号不正确";
                this.flag = true;
            } 
        },
        //失焦比对验证码
        checkCode(){
            if(this.codeText===this.$refs.codeSpan.innerHTML){
                this.$refs.codeSpan.innerHTML = "验证码正确"
            }else{
                this.$refs.codeSpan.innerHTML = "验证码不正确"
                this.flag = true;
            }
        }
    },
    
}
</script>

<style lang="less" scoped>
.registerBox{
    color:#000;
    background-color:#000;
    height:100%;
    .logo{
        height:12rem;
        line-height:12rem;
        text-align:center;
        background-color:#000;
         img{
            width:100px;
        }
    }  
}
.mixInput{
    width: 14rem;
    margin: 0 auto;
    .loginPhone{
        height: 3.5rem;
        line-height: 4.5rem;
        margin-top: 5px;
        width: 100%;
        border-bottom: 1px solid #fff;
        position: relative;
        input{
            margin: 0 0 0 55px;
            height: 100%;
            color:#fff;
        }
        // 手机验证 样式
        .activeTel{
            color:red;
            font-style:italic
        }
        i{
            color: #fff;
            font-size: 1.5rem;
            position: absolute;
            left: 5px;
            top: 3px;
            color:#FED906;
        }
    }
    .codeBox{
        color:#000;
        position: relative;
        .code{
            position:absolute;
            right:0;
            top:20px;
            width:120px;
            height:40px;
            line-height:40px;
            text-align: center;
            background-color: #FED906;
            border-radius: 15px;
            font-size:18/20rem;
        }
        //点击验证码从切换背景颜色
        .active{
            background-color: red;
            font-style: italic;
        }
        
    }
}
.submitBox{
    margin: 4rem 0;
    text-align: center;
    button{
        width: 14rem;
        height:2.5rem;
        margin: 0 auto;
        background-color: #FED906;
        font-size:1rem;
        border-radius: 10px;
        outline: none;
    }
}


    
</style>

















// <style lang="less" scoped>
// .registerBox{
//     background-color: #000;
//     .muscleLogo{
//         width:100%;
//         height:50rem;
//         background-color: red;

//     }

// }
    
// </style>